<template>
    <el-dialog title="设置商品包装费明细" v-model="open" width="850px" append-to-body>
        <el-form ref="packagingRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="数据年份" prop="year">
                <el-date-picker clearable v-model="form.year" type="year" value-format="YYYY" placeholder="请选择数据年份">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="所属账套" prop="asId">
                <el-select v-model="form.asId" placeholder="请选择商品所属账套" @change="getProductList">
                    <el-option v-for="dict in as_list" :key="dict.value" :label="dict.label"
                        :value="dict.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关联商品" prop="productIds">
                <el-select v-model="form.productIds" placeholder="请选择商品" multiple filterable collapse-tags collapse-tags-tooltip
                    :max-collapse-tags="6">
                    <el-option v-for="product in props.productList" :key="product.Id" :label="product.Name"
                        :value="product.Id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="包材费" prop="materialsCost">
                <el-input v-model="form.materialsCost" placeholder="请输入包材费"><template #append>元/件</template></el-input>
            </el-form-item>
            <el-form-item label="人工及打冷费" prop="chillingFee">
                <el-input v-model="form.chillingFee" placeholder="请输入人工及打冷费"><template #append>元/斤</template></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="closePackaging">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup name="PackagingEdit">

import {
    getPackaging,
    addPackaging,
    updatePackaging,
} from "@/api/sales/packaging";
import { listProduct } from "@/api/base/product";
import dayjs from "dayjs";
import { defineProps, reactive, watch } from 'vue';



const { proxy } = getCurrentInstance();
const { as_list, product_area } = proxy.useDict('as_list', 'product_area');

const props = defineProps({
    productList: { type: Array, required: true },
    productIds: { type: Array, required: false, default: [] }
});

const emit = defineEmits(['closePackaging']);
const closePackaging = () => {
    emit('closePackaging')
}

const loading = ref(true);
const currentYear = dayjs().year().toString();
const open = ref(false);

const data = reactive({
    form: {
        packagingId: null,
        materialsCost: null,
        chillingFee: null,
        productIds: [],
        asId: null,
        year: currentYear
    },
    rules: {
        materialsCost: [
            { required: true, message: "包材费不能为空", trigger: "blur" },
        ],
        chillingFee: [
            { required: true, message: "人工及打冷费不能为空", trigger: "blur" },
        ],
        productIds: [
            { required: true, message: "关联商品不能为空", trigger: "change" },
        ],
        year: [{ required: true, message: "数据年份不能为空", trigger: "blur" }],
    },
});

const { form, rules } = toRefs(data);

/** 控制对话框开闭 */
const controllDialog = (status) => {
    open.value = status;
    reset();
}


/** 读取已有记录 */
const getPackagingDetail = (id) => {
    console.log("id", id);
    getPackaging(id).then(response => {
        form.value = response.data;
        form.value.productIds = [form.value.productId];
    });
}
defineExpose({ controllDialog, getPackagingDetail })

// /** 取消按钮 */
// function cancel() {
//     props.open = false;
//     reset();
// }

/** 表单重置 */
function reset() {
    form.value = {
        packagingId: null,
        materialsCost: null,
        chillingFee: null,
        productIds: [],
        productId: null,
        asId: null,
        year: currentYear,
    };
    proxy.resetForm("packagingRef");
}



/** 提交按钮 */
function submitForm() {
    proxy.$refs["packagingRef"].validate(valid => {
        if (valid) {
            if (form.value.packagingId != null) {
                updatePackaging(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                });
            } else {
                addPackaging(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                });
            }
        }
    });
}

/** 根据账套重新选择商品信息 */
function getProductList(e) {
    const asId = e;
    loading.value = true;
    const productQueryParams = {
        pageNum: 1,
        pageSize: 3000,
        keywords: "",
        asId: asId
    };
    listProduct(productQueryParams).then(response => {
        productList.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}


/** 监听传参变化 */
watch(
    () => props.productIds,
    (newVal,oldVal) => {
        if (newVal) {
            // 将新值赋给表单字段
            console.log('productid', typeof form.productid)
            if (form.value) {
                form.value.productIds = newVal;
            }
        }
    },
    { deep: true, immediate: true } // 关键配置
);


</script>
